import { mapValues, without } from 'lodash'

export interface ComponentData {
  props: { [key: string]: any }
  id: string
  name: string
  layerName?: string
  isHidden?: boolean
  isLocked?: boolean
}

export interface PageData {
  props: { [key: string]: any }
  setting: { [key: string]: any }
  id?: number
  title?: string
  desc?: string
  coverImg?: string
  uuid?: string
  latestPublishAt?: string
  updatedAt?: string
  isTemplate?: boolean
  isHot?: boolean
  isNew?: boolean
  author?: string
  status?: string
}

export interface CommonComponentProps {
  // actions
  actionType: string
  url: string
  // size
  height: string
  width: string
  paddingLeft: string
  paddingRight: string
  paddingTop: string
  paddingBottom: string
  // border type
  borderStyle: string
  borderColor: string
  borderWidth: string
  borderRadius: string
  // shadow and opacity
  boxShadow: string
  opacity: string
  // position and x,y
  position: string
  left: string
  top: string
  right: string
}

// 基础组件的通用属性
export const commonDefaultProps: CommonComponentProps = {
  // actions
  actionType: '',
  url: '',
  // size
  height: '',
  width: '318px',
  paddingLeft: '0px',
  paddingRight: '0px',
  paddingTop: '0px',
  paddingBottom: '0px',
  // border type
  borderStyle: 'none',
  borderColor: '#000',
  borderWidth: '0',
  borderRadius: '0',
  // shadow and opacity
  boxShadow: '0 0 0 #000000',
  opacity: '1',
  // position and x,y
  position: 'absolute',
  left: '0',
  top: '0',
  right: '0'
}

export interface TextComponentProps extends CommonComponentProps {
  text: string
  fontSize: string
  fontFamily: string
  fontWeight: string
  fontStyle: string
  textDecoration: string
  lineHeight: string
  textAlign: string
  color: string
  backgroundColor: string
}

export interface ImageComponentProps extends CommonComponentProps {
  src: string
}

export interface ShapeComponentProps extends CommonComponentProps {
  backgroundColor: string
}

export type AllComponentProps = TextComponentProps & ImageComponentProps & ShapeComponentProps

// 文本组件特有属性
export const textDefaultProps: TextComponentProps = {
  text: '正文内容',
  fontSize: '14px',
  fontFamily: '',
  fontWeight: 'normal',
  fontStyle: 'normal',
  textDecoration: 'none',
  lineHeight: '1',
  textAlign: 'left',
  color: '#000000',
  backgroundColor: '',
  ...commonDefaultProps
}

// 图片特有属性
export const imageDefaultProps: ImageComponentProps = {
  src: 'test.url',
  ...commonDefaultProps
}
// 图形特有属性
export const shapeDefaultProps: ShapeComponentProps = {
  backgroundColor: '',
  ...commonDefaultProps
}

// 增加一个额外props属性，表示当前是否在画布区域；(在画布编辑的时候是不能点击跳转的)
export const isEditingProp = {
  isEditing: {
    type: Boolean,
    default: false
  }
}

// 组件的样式属性，将其他属性剔除掉。
export const textStylePropNames = without(Object.keys(textDefaultProps), 'actionType', 'url', 'text')
export const imageStylePropNames = without(Object.keys(imageDefaultProps), 'actionType', 'url', 'src')
export const shapeStylePropNames = without(Object.keys(shapeDefaultProps), 'actionType', 'url')

// 将属性转化成组件需要的props对象形式: text: '正文内容' => text: {type: String, default: '正文内容'}
export const transformToComponentProps = <T extends { [key: string]: any }>(props: T) => {
  // mapValues 获取该对象的每一个key对应的value
  const mapProps = mapValues(props, value => {
    return {
      // type: (item as any).constructor as StringConstructor,
      type: value.constructor,
      default: value
    }
  })

  return { ...mapProps, ...isEditingProp }
}
